<template>
	<el-row class="booklist">
		<div class="div1">
			<div class="div1-1">
				<p class="div1-1-p1"><i class="el-icon-s-data"></i>商品列表-修改</p>
			</div>
			<el-button class="addhotpic" @click="go2Add()"><i class="el-icon-document-delete"></i>添加新的商品</el-button>
			<button><i class="el-icon-refresh-right"></i></button>
		</div>

		<hr>

		<el-table :data="list" :cell-style="{textAlign:'center'}" :header-cell-style="{textAlign:'center'}" border
			style="width: 100%; margin-top: 20px;">
			<el-table-column prop="name" label="名称">
			</el-table-column>

			<el-table-column prop="sn" label="编号">
			</el-table-column>

			<el-table-column prop="author" label="作者">
			</el-table-column>

			<el-table-column prop="maker" label="厂家">
			</el-table-column>

			<el-table-column prop="tmake" label="日期">
			</el-table-column>

			<el-table-column prop="stock" label="库存">
			</el-table-column>

			<el-table-column prop="pic" label="图片">
				<template slot-scope="scope">
					<div>
						<img v-bind:src="`${$imgurl}/api/public/showimg/${scope.row.pic}`"
							style="height: 60px; width: 60px;" />
					</div>
				</template>
			</el-table-column>

			<el-table-column prop="scope" label="操作" class="adm">
				<template #default="{row}">
					<el-button class="btnSet" @click="go2Update(row.id)"><i class="el-icon-edit"></i>修改</el-button>
				</template>

			</el-table-column>
		</el-table>

		<el-button v-on:click="move(-1)">上一页</el-button>
		第{{page.start}}页/{{page.total}}
		<el-button v-on:click="move(+1)">下一页</el-button>

	</el-row>
</template>

<script>
	export default {
		name: 'BookList',
		data() {
			return {
				list: [],
				bookObj:{},
				page: {
					start: 1,
					num: 3,
					total: 0,
				},

			}
		},
		methods: {
			move(n) {
				this.page.start += n; // -1  +1
				// 越界  <1   >total
				if (this.page.start < 1) {
					this.page.start = 1;
					return;
				} // 已经在第一页， 无需获取数据
				if (this.page.start > this.page.total) {
					this.page.start = this.page.total;
					return;
				} // 已经在最后一页， 无需获取数据
				// 获取当前页数据  Get current（当前） page data 
				this.findAll();
			},

			findAll() {
				this.$get("/api/adm/book/findByPage/" + this.page.start + "/" + this.page.num)
					.then((resp) => {
						console.log(resp.data);
						this.list = resp.data.data.books;
						this.page.total = Math.ceil(resp.data.data.total / this.page.num);
					})
			},

			// 跳转到添加页面
			go2Add() {
				this.$router.push({
					path: '/adm/addBookList',
					query: {
						id: 0
					}
				})
			},

			go2Update(id) {
				console.log(id);
				// this.$get("/api/adm/book/findById/" + id)
				// 	.then((resp) => {
				// 		console.log(resp.data);
				// 		this.bookObj = resp.data.data;
				// 	})
				this.$router.push({
					path: '/adm/addBookList',
					query: {
						id: id
					}
				})
			}
		},
		mounted() {
			// let kv = this.$qs.stringify(this.page);
			this.findAll();
		}
	}
</script>

<style scoped>
	.booklist {
		margin-left: 20px;
		width: 100%;
		height: 600px;
		line-height: 50px;
	}

	.div1 {
		margin-top: 18px;
		display: flex;
		justify-content: space-between;
		margin-bottom: -9px;
	}

	.div1-1 {
		display: flex;
	}

	.div1-1-p1 {
		font-size: 18px;
	}

	.div1 .addhotpic {
		width: 300px;
		color: white;
		background-color: #87ceeb;
	}

	.div1 button {
		background-color: #189F92;
		border: none;
		width: 55px;
		height: 38px;
		margin-top: 7px;
		border-radius: 2px;
	}

	/* 刷新图标 */
	.el-icon-refresh-right {
		color: white;
		font-size: 22px;
	}

	.booklist hr {
		border: 1px gainsboro solid;
	}

	.btnSet {
		background-color: skyblue;
		color: white;
		border: none;
		height: 35px;
		width: 80px;
		/* align-items: center; */
		border-radius: 3px;

	}
</style>